.checkboxLabel {
  display: inline-block;
  cursor: pointer;
  width: 100%;
  span {
    vertical-align: middle;
  }
  .rCheckbox {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid transparent;
    position: relative;
    margin-top: -1px;
    vertical-align: middle;
    margin-right: 10px;
    &.grayCheckbox {
      background-color: #ccc;
      cursor: not-allowed;
    }
    &:before {
      content: '';
      border: 1px solid;
      border-color: #fff;
      display: block;
      position: absolute;
      width: 2px;
      transform: rotate(45deg);
      top: 6px;
      left: 1px;
    }
    &:after {
      content: '';
      border: 1px solid;
      border-color: #fff;
      display: block;
      position: absolute;
      width: 7px;
      transform: rotate(-45deg);
      top: 5px;
      left: 3px;
    }
  }
  &:not(.checked) .rCheckbox {
    background-color: #fff !important;
    border: 1px solid #ccc;
    &:before {
      border-color: transparent;
    }
    &:after {
      border-color: transparent;
    }
  }
}
